<template>
	<view class="details">
		<view class="tag-container">
			<u-tabs :list="payCompanyList" :current="current" lineColor="rgb(96,114,255)" :scrollable="false"
				inactiveStyle="color: 'rgba(0, 0, 0, 0.5)" lineWidth="25" lineHeight="3"
				@change="chooseTagList($event)">
			</u-tabs>
		</view>
		<u-cell-group :customStyle="{'background': '#fff', 'marginTop':'20rpx'}">
			<u-cell title="商户号" :value="merchant.merchantId"></u-cell>
			<view v-if="!registerStatus"><u-cell title="商户状态">
					<view slot="value" class="u-slot-title">
						<u-tag text="审核中" size="mini" v-if="merchant.status==merchantStatusEnum.AUDITING_MYBANK" />
						<u-tag text="开通" type="success" size="mini"
							v-else-if="merchant.status==merchantStatusEnum.SUCCESS" />
						<u-tag text="拒绝" type="error" size="mini"
							v-else-if="merchant.status==merchantStatusEnum.FAIL || merchant.status == merchantStatusEnum.GO_BACK" />
						<u-tag text="禁用" type="warning" size="mini"
							v-else-if="merchant.status==merchantStatusEnum.OFF" />
						<u-tag text="平台审核中" size="mini" v-if="merchant.status==merchantStatusEnum.AUDITING_YIHAO" />
						<u-tag text="渠道人工审核中" size="mini"
							v-if="merchant.status==merchantStatusEnum.AUDITING_MYBANK_MAN" />
					</view>
				</u-cell>
				<u-cell title="商户全称" :value="merchant.merchantName"></u-cell>
				<u-cell title="微信商户号" :value="merchant.wechatMerchId"></u-cell>
				<u-cell title="支付宝商户号" :value="merchant.aliMerchId"></u-cell>
<!--				<u-cell title="微信、支付宝认证" :isLink="true" @click="checkScanAttestation=true"-->
<!--					v-if="merchant.status == merchantStatusEnum.SUCCESS"></u-cell>-->
<!--				<u-cell title="查看微信、支付宝认证状态" :isLink="true" v-else-->
<!--					@click="navigateTo('/pages-my/name-authentication/name-authentication')"></u-cell>-->
				<u-cell title="商户简称（支付时展示的名称）" :value="merchant.merchantShortName"
					@click="updateMerchantName(merchant.merchantShortName)" :isLink="true"></u-cell>
				<u-cell title="姓名" :value="merchant.principalPerson"></u-cell>
				<u-cell title="身份证号码" :value="merchant.principalCertNo"></u-cell>
				<view v-if="!registerStatus && merchant.status == merchantStatusEnum.SUCCESS">
					<u-cell title="银行卡" :isLink="true" :value="merchant.bankCardNo"
						@click="nav('/pages-qualification/update-debit-card/update-debit-card?merchant=', merchant)"></u-cell>
				</view>
				<u-cell title="开户银行" :value="merchant.bankName"></u-cell>
				<u-cell
					v-if="merchant.status == merchantStatusEnum.FAIL || merchant.status == merchantStatusEnum.GO_BACK">
					<view slot="title" class="u-slot-title">
						<text class="u-cell-text refuse">拒绝原因</text>
					</view>
					<view slot="value" class="u-slot-title right">
						{{merchant.failReason?merchant.failReason:''}}
					</view>
				</u-cell>
			</view>
		</u-cell-group>
		<view class="footer" v-if="registerStatus">
			<u-button type="primary" :customStyle="nextStepBtnCustomStyle"
				@click="signUpNewChannel()">签约《{{payCompanyName}}》渠道</u-button>
		</view>
		<view class="footer" v-if="(merchant.status == 2 || merchant.status == 5) && !registerStatus">
			<u-button type="primary" @click="nav('/pages-qualification/add/settlement-type?merchant=', merchant)"
				:customStyle="nextStepBtnCustomStyle">编辑商户信息，重新提交</u-button>
		</view>
		<view>
			<u-popup :show="checkModifyFrame" mode="center" round="20rpx" @close="closeupdateMerchantNamee"
				@open="updateMerchantName">
				<view class="update-merchant-name-content">
					<view class="right-icon" @click="closeupdateMerchantNamee">
						<u-icon name="close" color="rgba(0, 0, 0, 0.7)" size="20"></u-icon>
					</view>
					<view class="merchant-center">修改商户简称</view>
					<view class="u-m-t-48 collection">商户收款简称</view>
					<u--input placeholder="请输入" inputAlign="center" placeholderStyle="font-size:28rpx;" border="bottom"
						clearable v-model="merchantShortName" maxlength="20"></u--input>
					<view>
						<u-button type="primary" text="保存" :customStyle="authBtnCustomStyle" @click="submit()">
						</u-button>
					</view>
				</view>
			</u-popup>
		</view>
		<view>
			<u-popup :show="checkAttestation" mode="center" round="20rpx" @close="" @open="openCheckAttestation">
				<view class="update-merchant-name-content">
					<view class="merchant-center">温馨提示</view>
					<view class="u-m-t-62 u-p-l-38 u-p-r-38 collection">乐刷渠道需要进行渠道认证，认证成功后才能正常支付</view>
					<view>
						<u-button type="primary" text="认证" :customStyle="authBtnCustomStyle"
							@click="nav('/pages-merchant/yeahka-authentication/yeahka-authentication?merchant=', merchant)">
						</u-button>
					</view>
				</view>
			</u-popup>
		</view>
		<view>
			<u-popup :show="checkScanAttestation" mode="center" round="20rpx" @close="closeScanAttestation()"
				@open="openScanAttestation()">
				<view class="update-merchant-name-content">
					<view class="right-icon" @click="closeScanAttestation">
						<u-icon name="close" color="rgba(0, 0, 0, 0.7)" size="20"></u-icon>
					</view>
					<view class="merchant-center">请识别图中的二维码</view>
					<view class="qr-box u-flex u-m-t-37 u-row-around">
						<view class="qr-item">
							<u--image :showLoading="true" :src="wxQrcodeBase" width="177rpx" height="177rpx"
								mode="aspectFill" />
							<!-- <view class="lose-efficacy" :style="'background:url('+errCode+');'" v-else>
								查看状态
							</view> -->
							<view class="u-flex-content-center u-m-t-23">
								<u-icon name="weixin-circle-fill" color="rgb(40, 196, 69)" size="20"></u-icon>
								<view class="attestation-style u-m-l-2">微信认证</view>
							</view>
							<view class="u-m-t-20">提示：长按<text class="f-bold">识别</text>上方二维码打开<text
									class="f-bold">【微信支付商家助手】</text>小程序进行认证。</view>
						</view>
						<view class="qr-item">
							<u--image :showLoading="true" :src="payQrcode" width="177rpx" height="177rpx"
								mode="aspectFill" />
							<!-- <view class="lose-efficacy" :style="'background:url('+errCode+') no-repeat;background-size: cover;'" v-else>
								查看状态
							</view> -->
							<view class="u-flex-content-center u-m-t-23">
								<u-icon name="zhifubao-circle-fill" color="rgb(6, 180, 253)" size="20"></u-icon>
								<view class="attestation-style u-m-l-2">支付宝认证</view>
							</view>
							<view class="u-m-t-20">提示：长按<text class="f-bold">保存</text>上方二维码图片，然后手动打开<text
									class="f-bold">【支付宝】</text>APP扫一扫识别保存的二维码进行认证。</view>
						</view>
					</view>

					<view class="u-m-t-50 explain">
						基于（非银行支付机构网络支付业务管理办法），即日起须<text class="red-font-size">收款本人扫码</text>完成<text
							class="red-font-size">实名操作</text>，否则无法使用微信和支付宝支付。
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				merchantStatusEnum: this.$merchantStatusEnum,
				merchantAliEnum: this.$merchantAliEnum,
				merchantWechatEnum: this.$merchantWechatEnum,
				nextStepBtnCustomStyle: {
					width: '690rpx',
					height: '88rpx',
					borderRadius: '120rpx',
					color: '#fff',
					margin: '70rpx auto 0rpx',
				},
				authBtnCustomStyle: {
					height: '88rpx',
					borderRadius: '120rpx',
					color: '#fff',
					margin: '70rpx auto 0rpx',
				},
				payCompanyList: [],
				merchant: {},
				merchantShortName: '',
				current: 0,
				payCompanyName: '',
				registerStatus: false,
				checkModifyFrame: false,
				checkAttestation: false,
				checkScanAttestation: false,
				value: '',
				wxQrcode: '',
				payQrcode: '',
				wxQrcodeBase: '',
				disableNameList: ["酒店", "网吧", "网咖", "售卖机", "售货机", "捕鱼机", "打鱼机", "酒吧", "便利店"],
				errCode: this.$configPath.staticFileUrl + '/image/pages-merchant/err-code.png'
			}
		},
		onShow() {
			// 查询渠道
			this.findPayCompany();
		},
		onLoad(options) {
			this.merchant = JSON.parse(decodeURIComponent(options.merchant));
      if (options.checkScanAttestation){
          this.checkScanAttestation=options.checkScanAttestation;
      }
			// console.log("merchant", this.merchant)
			// console.log("wechatMerchId", this.merchant.wechatMerchId)
		},
		methods: {
			// 签约新渠道
			signUpNewChannel() {
				uni.showModal({
					title: '温馨提示',
					content: "如果您的商户可以正常使用或未认证请勿继续签约其他渠道。因为签约后90天内无交易将会自动关闭支付权限并且消耗一个永久支付权限名额（每个资质在每个渠道的支付权限名额有限）",
					cancelText: "确定申请",
					confirmText: "取消",
					success: (res) => {
						if (!res.confirm) {
							uni.showLoading({
								title: '签约中...',
								mask: true
							})
							let body = {
								payCompanyCode: this.merchant.payCompanyCode,
								outTradeNo: this.merchant.outTradeNo,
								bankCardNo: this.merchant.bankCardNo,
								bankCertName: this.merchant.bankCertName,
							}
							this.$api('merchant.merchantReRegistration', body).then(res => {
								uni.hideLoading();
								if (res.status == 0) {
									this.$helpers.toast("签约成功，请等待审核", 'none', 3000, true, () => {
										this.findMerchantInfo();
									});
								} else {
									getApp().err("签约不成功：" + res.msg);
								}
							}).catch(() => {
								uni.hideLoading();
							});
						}
					}
				})
			},

			//弹出扫码认证
			openScanAttestation() {
				const weChatCertificationCode = this.payCompanyList[this.current].weChatCertificationCode;
				const alipayChatCertificationCode = this.payCompanyList[this.current].alipayChatCertificationCode;
				// this.wxQrcode = this.$mQrCode.createQrCodeImg(weChatCertificationCode, {
				// 	size: parseInt(300) //二维码大小
				// })

				// this.payQrcode = this.$mQrCode.createQrCodeImg(alipayChatCertificationCode, {
				// 	size: parseInt(300) //二维码大小
				// })
				console.log(this.merchant)
				this.wxQrcode = this.merchant.qrcodeData
				this.payQrcode = this.merchant.aliQrcode
				this.previewImage();
			},
			previewImage() {
				const wxQrcodeDataUrl = `data:image/png;base64,${this.wxQrcode}`;
				this.wxQrcodeBase = wxQrcodeDataUrl;
			},
			//关闭扫码认证
			closeScanAttestation() {
				this.checkScanAttestation = false
			},
			//弹出乐刷认证
			openCheckAttestation() {
				this.checkAttestation = true
			},
			//关闭乐刷认证 目前未用到
			closeCheckAttestation() {
				this.checkAttestation = false;
			},
			//修改商户简称
			updateMerchantName(merchantShortName) {
				this.merchantShortName = merchantShortName
				this.checkModifyFrame = true;
			},
			//关闭修改商户的弹框
			closeupdateMerchantNamee() {
				this.checkModifyFrame = false;
			},
			//保存修改商户的名称
			submit() {
				if (!uni.$u.trim(this.merchantShortName, 'all')) {
					getApp().err('请输入商户简称');
					return;
				}

				if (this.merchantShortName == this.merchant.merchantShortName) {
					getApp().err('商户简称无变更，请点击右上角关闭窗口');
					return;
				}

				for (let i = 0; i < this.disableNameList.length; i++) {
					if (this.merchantShortName.indexOf(this.disableNameList[i]) >= 0) {
						getApp().err('商户收款简称不能包含' + this.disableNameList[i] + '等名称，请更换');
						return;
					}
				}
				uni.showLoading({
					title: '修改中...',
					mask: true
				})
				
				let params = {
					outTradeNo: this.merchant.outTradeNo,
					merchantId: this.merchant.merchantId,
					payCompanyCode: this.merchant.payCompanyCode,
					merchantShortName: uni.$u.trim(this.merchantShortName, 'all'),
				}
				this.$api('merchant.updateMerchantShortName', params).then(res => {
					uni.hideLoading();
					if (res.status == 0) {
						this.$helpers.toast("修改成功", 'success', 3000, true, () => {
							this.closeupdateMerchantNamee()
							this.findMerchantInfo();
						});
					} else {
						getApp().err("修改不成功，" + res.msg);
					}
				}).catch(() => {
					uni.hideLoading();
				});

			},
			//跳转乐刷认证页面
			nav(u, data) {
				// console.log("u", u)
				uni.navigateTo({
					url: u + encodeURIComponent(JSON.stringify(data))
				});
			},
			navigateTo(u) {
				// console.log("u", u)
				uni.navigateTo({
					url: u
				});
			},


			chooseTagList(item) {
				// console.log(item)
				// console.log(this.payCompanyList);
				this.current = item.index
				this.merchant.payCompanyCode = this.payCompanyList[item.index].code
				this.payCompanyName = this.payCompanyList[item.index].name
				this.findMerchantInfo();
			},

			findPayCompany() {
				this.$api('merchantPayCompany.findPayCompanyByApplet', {
					payCompanyCode: this.merchant.payCompanyCode
				}).then(res => {
					this.payCompanyList = res.data;
					for (let i = 0; i < this.payCompanyList.length; i++) {
						if (this.payCompanyList[i].code == this.merchant.payCompanyCode) {
							this.merchant.payCompanyCode = this.payCompanyList[i].code;
							this.current = i;
							break;
						}
					}
					this.findMerchantInfo();
				})
			},
			// 查询商户信息
			findMerchantInfo(type) {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				let param = {
					outTradeNo: this.merchant.outTradeNo,
					merchantId: this.merchant.merchantId,
					payCompanyCode: this.merchant.payCompanyCode,
				}
				this.$api('merchant.findMerchantInfoByApplet', param).then(res => {
					if (type === 'refresh') {
						uni.stopPullDownRefresh();
					}
					if (res.status == 0) {
						if (res.data != null) {
							this.registerStatus = false;
							this.merchant = res.data;
							if (this.merchant.status == this.merchantStatusEnum.SUCCESS && this.merchant
								.payCompanyCode == this.$payCompanyEnum.YEAHKA) {
								this.findYeahkaOpenSplitStatus(param);
							}
						} else {
							this.registerStatus = true;
						}
						uni.hideLoading();
					}
				}).catch(() => {
					if (type === 'refresh') {
						uni.stopPullDownRefresh();
					}
					uni.hideLoading();
				});
			},

			findYeahkaOpenSplitStatus(param) {
				this.$api('merchantPayCompany.findYeahkaOpenSplitStatus', param).then(data => {
					if (data.status == 0) {
						if (data.data.openSplitStatus == null || data.data.openSplitStatus == 0) {
							this.openCheckAttestation()
						}
					} else {
						getApp().err("查询【乐刷】渠道认证状态不成功，" + res.msg);
					}
				}).catch(() => {
					uni.hideLoading();
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-cell__body {
		padding: 36rpx 24rpx !important;
	}

	/deep/ .u-cell__title-text {
		font-size: $f-base !important;
		color: rgba(0, 0, 0, 0.7) !important;
	}

	/deep/ .u-cell__value {
		color: rgba(0, 0, 0, 0.9) !important;
	}

	/deep/ .u-input {
		margin: 38rpx 0rpx 18rpx 0rpx !important;
		padding: 0rpx 0rpx 18rpx 0rpx !important;
	}

	/deep/ .u-safe-area-inset-bottom {
		padding: 0rpx;
	}

	.details {
		.tag-container {
			background-color: white;
		}

		.footer {
			width: 100%;
			margin-top: 94rpx;
			padding-bottom: 74rpx;
		}

		.refuse {
			font-size: $f-base;
			color: rgba(0, 0, 0, 0.7);
			color: rgb(254, 64, 76);
		}

		.right {
			width: 490rpx;
			font-size: $f-base;
		}

		.update-merchant-name-content {
			width: 586rpx;
			margin: 24rpx 30rpx 48rpx;
			box-sizing: border-box;

			.right-icon {
				display: flex;
				justify-content: flex-end;
			}

			.merchant-center {
				display: flex;
				justify-content: center;
				color: rgb(0, 0, 0);
				font-size: $f-xl;
				font-weight: bold;
			}

			.collection {
				color: rgba(0, 0, 0, 0.9);
				font-size: $f-base;
			}

			.attestation-style {
				color: rgba(0, 0, 0, 0.7);
				font-size: $f-sm;
			}

			.qr-box {
				align-items: flex-start !important;

				.qr-item {
					text-align: center;
					width: 300rpx;
					padding: 0 20rpx;
					font-size: $f-base;

					/deep/ .u-image {
						margin: 0 auto !important;
					}

					.lose-efficacy {
						width: 177rpx;
						height: 177rpx;
						margin: 0 auto !important;
						display: flex;
						align-items: center;
						justify-content: center;
						color: $u-primary;
						font-weight: 500;
					}
				}

				.f-bold {
					font-weight: bold;
				}
			}

			.auth-box {
				.auth-item {
					text-align: center;
					width: 300rpx;
					font-size: $f-base;
					color: rgba(0, 0, 0, 0.7);
				}
			}

			.explain {
				font-size: 30rpx;
				line-height: 44rpx;
				letter-spacing: 1rpx;
				color: rgba(0, 0, 0, 0.8);
				padding: 0 20rpx;

				.red-font-size {
					color: rgb(230, 45, 45);
				}
			}

		}

	}
</style>
